<template>
  <div class="SWC_box">
    <van-tabs
      v-model:active="active"
      @click-tab="onClickTab"
      @change="onChangeTab"
      swipeable
      :sticky="sticky"
      offset-top="2.5rem"
    >
      <van-tab
        v-for="i in ['全部', '厨师', '小工', '兼职']"
        :title="i"
        :name="i"
        :key="i"
      >
        <div class="list_box">
          <!--          <SWorkerItem />-->
          <!--          <SWorkerItem />-->
          <!--          <SWorkerItem />-->
          <SWorkerItem
            v-for="item in newStaffList"
            :staffItem="item"
            :key="item.staff_id"
          />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref } from "vue";
// import { Toast } from "vant";
import SWorkerItem from "./SWorkerItem";
import { getStaff } from "../../../api/home";

export default {
  name: "SWorkerContent",
  components: { SWorkerItem },
  setup() {
    const active = ref("全部");
    const sticky = ref(true);
    //数据
    const staffList = ref([]);
    //帅选值
    let newStaffList = ref([]);
    getStaff().then((res) => {
      // console.log(res);
      staffList.value = res.data;
      newStaffList.value = staffList.value;
    });
    //点击选择
    const onClickTab = ({ title }) => {
      active.value = title;
      if (title == "全部") {
        return (newStaffList.value = staffList.value);
      }
      newStaffList.value = staffList.value.filter(
        (item) => item.staff_type == title
      );
    };
    //滑动选择
    const onChangeTab = (title) => {
      active.value = title;
      if (title == "全部") {
        return (newStaffList.value = staffList.value);
      }
      newStaffList.value = staffList.value.filter(
        (item) => item.staff_type == title
      );
    };
    return {
      active,
      sticky,
      onClickTab,
      onChangeTab,
      newStaffList,
    };
  },
};
</script>

<style scoped lang="less">
.SWC_box {
  flex: auto;
  width: 100%;
  padding-top: 2.5rem;
  box-sizing: border-box;
}
::v-deep(.van-sticky) {
  z-index: 0;
}
.list_box {
  padding: 0 0.3rem;
  box-sizing: border-box;
}
</style>
